<template>
    <li>
        <!--带子级展开的nav  不跳转-->
        <a v-if="childrenNodeState" tabindex :class='levelClass+childrenOpenClass+focusClass' class="cur-pointer" @click="openChildrenChange">
            <!--带子级展开的二级nav-->
            <template v-if="pLevel">{{pData.title}}</template>
            <!--带子级展开的一级nav 带icon-->
            <template v-else><i :class="pData.iconClass"></i><span class="hide-menu">{{pData.title}}</span></template>
        </a>
        <template v-else>
            <!--子级nav 跳转-->
            <a v-if="pLevel" tabindex class="cur-pointer" :class='childrenOpenClass' @click="link(pData.urlName,pData.urlParams,pData.urlQuery)" >{{pData.title}}</a>
            <!-- 一级nav 跳转-->
            <a v-else tabindex class="cur-pointer" :class='focusClass'  @click="link(pData.urlName,pData.urlParams,pData.urlQuery)">
                <i :class="pData.iconClass"></i><span class="hide-menu">{{pData.title}}</span>
            </a>
        </template>
        <!--展开子级列表nav -->
        <ul v-if="childrenNodeState" class="collapse"  :class='childrenListOpenClass'><!--in-->
            <template v-for='(item,index) in pData.children'>
                <menu-nav :p-data="item" :p-index='index' :p-select='navSelect' :p-focus='navFocus' :p-level='pLevel+1'  @on-select='menuNavSelectChange'></menu-nav>
            </template>
        </ul>
    </li>
</template>
<script>
    export default{
        name:'MenuNav',
        props:{
            pData:{
                type: [Object,Array],
                required: true
            },
            pLevel:{
                type: Number,
                default: 0
            },
            pSelect:{
                type: Number,
                default: -1
            },
            pFocus:{
                type: Number,
                default: -1
            },
            pIndex: Number,
        },
        data(){
            return{
                navSelect:-1,
                navFocus:-1,
            }
        },
        methods: {
            activeChange(){
                if(this.$route.name==this.pData.urlName){
                    if(this.pData.urlQuery){
                        let c = true;
                        for (var key in this.pData.urlQuery){
                            if(this.$route.query[key]!=this.pData.urlQuery[key]){
                                c = false;
                            }
                        }
                        return c
                    }
                    return true
                }else {
                    return false
                }
            },
            openChildrenChange($e,link){
                // alert(1)
                if(link){
                    /*无子级*/
                    this.$emit('on-select',{index:this.pIndex,focus:true});
                }else{
                    /*有子级 */
                    if(this.childrenOpen){
                        /*本身是打开状态*/
                        this.$emit('on-select',{index:-1,focus:this.pFocus==this.pIndex});
                    }else{
                        /*本身是关闭状态*/
                        if(this.navFocus!=-1){
                            this.$emit('on-select',{index:this.pIndex,focus:this.pFocus==this.pIndex});
                            this.$set(this,'navSelect',this.navFocus);
                        }else {
                            this.$emit('on-select',{index:this.pIndex,focus:false});
                            this.$set(this,'navSelect',-1);
                        }
                    }
                }
            },
            menuNavSelectChange(index){
                this.$set(this,'navSelect',index.index);
                if(index.focus&&this.navSelect!=-1){
                    this.$set(this,'navFocus',this.navSelect);
                    this.$emit('on-select',{index:this.pIndex,focus:true});
                }else {
                    this.$emit('on-select',{index:this.pIndex,focus:this.pFocus!=-1});
                }
            },
            link(name,params,query){
                // alert(1)
                if(!name){
                    this.$Notice.open({
                        title:this.pData.title,
                        desc: '此功能尚未进行开发,敬请期待',
                        duration:2
                    });
                    return false
                }
                if(this.pData.dev&&apiConfig.BUILD){
                    this.$Notice.open({
                        title:this.pData.title,
                        desc: '此功能尚未进行开发,敬请期待',
                        duration:2
                    });
                    return false
                }
                this.openChildrenChange({},true);
                this.$router.push({name:name,params:params,query:query})
            }
        },
        computed:{
            levelClass(){
                return this.pLevel==0?'has-arrow waves-effect waves-dark ':'has-arrow '
            },
            childrenOpen(){
                return this.pSelect==this.pIndex
            },
            childrenOpenClass(){
                return this.childrenOpen?'active ':''
            },
            focusClass(){
                return this.pFocus==this.pIndex?'active_focus ':''
            },
            childrenListOpenClass(){
                return this.pSelect==this.pIndex?'in ':''
            },
            childrenNodeState(){
                return this.pData.children&&this.pData.children.length>0?true:false
            },
        },
        mounted () {
            if(this.activeChange()){
                this.openChildrenChange({},true);
            }
        },
        components:{},
        watch:{
            pSelect(nV,oV){
                if(this.pFocus!=this.pIndex){
                    if(this.navFocus!=-1){
                        this.$set(this,'navFocus',-1);
                        this.$set(this,'navSelect',-1);
                    }
                }
            }
        }
    }
</script>